<template>
	<div class="container-div">
		<div class="app-container">
			<a-row :gutter="24">
				<a-col :span="24">
					<a-form layout="inline">
						<div style="margin-top: 10px">
							<a-form-item label="登录地址">
								<a-input placeholder="请输入" />
							</a-form-item>

							<a-form-item label="用户名称">
								<a-input placeholder="请输入" />
							</a-form-item>
							<a-form-item label="状态">
								<a-select
									prop="status"
									show-search
									placeholder="状态"
									option-filter-prop="children"
									style="width: 200px"
									:filter-option="filterOption"
									@focus="handleFocus"
									@blur="handleBlur"
									@change="handleChange"
								>
									<a-select-option value="成功"> 成功 </a-select-option>
									<a-select-option value="失败"> 失败 </a-select-option>
								</a-select>
							</a-form-item>

							<a-form-item label="登录时间">
								<a-range-picker @change="rangePicker" prop="createTime" />
							</a-form-item>
							<span>
								<a-button style="margin-top: 4px" @click="handleSearch" type="primary">搜索</a-button>
								<a-button @click="handleReset" style="margin-left: 8px">重置</a-button>
							</span>
						</div>
					</a-form>
				</a-col>
				<!-- 按钮 -->
				<a-col :span="24">
					<div style="margin: 10px 0px; padding-left: 0px">
						<!-- <a-button type="primary" @click="showModal" width="400" ghost>新增</a-button> -->
						<!-- <a-modal v-model="visible" height="400px" width="800px" title="添加用户" @ok="handleOk"> </a-modal> -->
						<a-button type="danger" @click="batchDelete" ghost style="margin-left: 10px">删除</a-button>
						<a-button type="danger" @click="handleClean" ghost style="margin-left: 10px">清空</a-button>

						<a-button type="primary" @click="handleExport" ghost style="margin-left: 10px">导出</a-button>
					</div>
				</a-col>
				<a-col :span="24">
					<a-table :columns="columns" :data-source="data" :row-selection="rowSelection">
						<a-col :gutter="8" :span="24">
							<a-form-item label="创建时间">
								<!--  @change="onChange" -->
								<a-range-picker @change="rangePicker" />
							</a-form-item>
						</a-col>
						<!-- 操作类型 -->
						<a slot="name" slot-scope="text">{{ text }}</a>
						<span slot="businessType"><a-icon type="smile-o" /> Name</span>
						<span slot="businessType" slot-scope="businessType">
							<a-tag
								v-for="businessType in businessType"
								:key="businessType"
								:color="businessType === 'loser' ? 'volcano' : businessType.length > 1 ? 'orange' : 'orange'"
							>
								{{ businessType.toUpperCase() }}
							</a-tag>
						</span>
						<!-- 状态 -->
						<a slot="name" slot-scope="text">{{ text }}</a>
						<span slot="customTitle"><a-icon type="smile-o" /> Name</span>
						<span slot="status" slot-scope="status">
							<a-tag v-for="status in status" :key="status" :color="status === 'loser' ? 'volcano' : status.length > 5 ? 'blue' : 'blue'">
								{{ status.toUpperCase() }}
							</a-tag>
						</span>

						<span slot="action" slot-scope="text, record">
							<a @click="detailDrawer"> 详细</a>
						</span>
					</a-table>
				</a-col>
			</a-row>
		</div>
		<!-- 详情 -->
		<!-- <a-form-model ref="ruleForm">
			<a-row width="640">
				<a-row>
					<a-col :span="12">
						<a-form-model-item ref="name" label="操作模块" prop="roleName"> </a-form-model-item>
					</a-col>
					<a-col :span="12" :warpper="8">
						<a-form-model-item ref="roleKey" label="参数名称" prop="configName"> </a-form-model-item>
					</a-col>
				</a-row>
				<a-row>
					<a-col :span="12">
						<a-form-model-item ref="name" label="登录信息" prop="roleName"> </a-form-model-item>
					</a-col>
					<a-col :span="12" :warpper="8">
						<a-form-model-item ref="roleKey" label="请求方式" prop="configName"> </a-form-model-item>
					</a-col>
				</a-row>
				<a-row>
					<a-col :span="12" :warpper="8">
						<a-form-item label="操作方式" prop="status"> </a-form-item>
					</a-col>
				</a-row>
				<a-row>
					<a-col :span="12" :warpper="8">
						<a-form-item label="请求方法" prop="status"> </a-form-item>
					</a-col>
				</a-row>
				<a-row>
					<a-col :span="12" :warpper="8">
						<a-form-item label="返回方法" prop="status"> </a-form-item>
					</a-col>
				</a-row>
				<a-row>
					<a-col :span="12">
						<a-form-model-item ref="name" label="操作状态" prop="roleName"> </a-form-model-item>
					</a-col>
					<a-col :span="12" :warpper="8">
						<a-form-model-item ref="roleKey" label="操作时间" prop="configName"> </a-form-model-item>
					</a-col>
				</a-row>
			</a-row>
		</a-form-model> -->
	</div>
</template>

<script>
const columns = [
	{
		title: '访问编号',
		dataIndex: 'infoId',
		align: 'center',
	},
	{
		title: '用户名称',
		dataIndex: 'userName',
		ellipsis: true,
		align: 'center',
	},
	{
		title: '登录地址',
		dataIndex: 'ipaddr',
		scopedSlots: { customRender: 'ipaddr' },
		align: 'center',
	},
	{
		title: '登录地点',
		dataIndex: 'loginLocation',
		scopedSlots: { customRender: 'ipaddr' },
		align: 'center',
	},
	{
		title: '浏览器',
		dataIndex: 'browser',
		scopedSlots: { customRender: 'ipaddr' },
		align: 'center',
	},
	{
		title: '操作系统',
		dataIndex: 'os',
		scopedSlots: { customRender: 'os' },
		align: 'center',
	},
	{
		title: '登录状态',
		dataIndex: 'status',
		scopedSlots: { customRender: 'status' },
		align: 'center',
	},
	{
		title: '操作信息',
		dataIndex: 'msg',
		scopedSlots: { customRender: 'msg' },
		align: 'center',
	},

	{
		title: '登录日期',
		dataIndex: 'accessTime',
		scopedSlots: { customRender: 'accessTime' },
		align: 'center',
	},
];
const data = [
	{
		key: '1',
		infoId: '49932',
		userName: 'admin',
		ipaddr: '58.39.10.176',
		loginLocation: '上海市',
		browser: 'Chrome',
		os: 'Windows 10',
		status: ['成功'],
		msg: '登录成功',
		accessTime: '2022-03-02 12:23:23',
		action: '',
	},
	{
		key: '2',
		infoId: '49933',
		userName: 'admin',
		ipaddr: '58.39.10.175',
		loginLocation: '上海市',
		browser: 'Chrome',
		os: 'Windows 10',
		status: ['成功'],
		msg: '登录成功',
		accessTime: '2022-03-02 12:23:23',
		action: '',
	},
	{
		key: '3',
		infoId: '49994',
		userName: 'admin',
		ipaddr: '59.39.10.175',
		loginLocation: '香港',
		browser: 'Chrome',
		os: 'Windows 10',
		status: ['成功'],
		msg: '登录成功',
		accessTime: '2022-03-02 12:23:23',
		action: '',
	},
];
const rowSelection = {
	onChange: (selectedRowKeys, selectedRows) => {
		console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
	},
	onSelect: (record, selected, selectedRows) => {
		console.log(record, selected, selectedRows);
	},
	onSelectAll: (selected, selectedRows, changeRows) => {
		console.log(selected, selectedRows, changeRows);
	},
};
export default {
	data() {
		return {
			visible: false,
			expandedKeys: ['0-0-0', '0-0-1'],
			data,
			columns,
			rowSelection,
			expandedRowKeys: [],
			// 筛选日期
			dateRange: [],
		};
	},
	computed: {},
	methods: {
		detailDrawer() {
			console.log('detalil');
			this.detailDrawer;
		},
		// 状态选择
		handleChange(value) {
			console.log(`selected ${value}`);
		},
		handleBlur() {
			console.log('blur');
		},
		handleFocus() {
			console.log('focus');
		},
		filterOption(input, option) {
			return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0;
		},
		// 搜索按钮
		async handleSearch() {
			console.log('sousuo');
		},
		// 重置
		handleReset() {
			console.log('reset');
			this.dateRange = [];
			// 	this.queryParams = {
			// 		pageNum: 1,
			// 		pageSize: 10,
			// 		roleName: undefined,
			// 		roleKey: undefined,
			// 		status: undefined,
			// 	};
			// 	this.handleReset();
		},
		// 列删除
		// handleDelete(row) {
		// 	console.log('shanchuyilie');
		// 	const operId = row.operId;
		// 	const that = this;
		// 	this.$confirm({
		// 		title: '警告',
		// 		content: `真的要删除 部门编号为${operId}的数据项吗?`,
		// 		okText: '删除',
		// 		okType: 'danger',
		// 		cancelText: '取消',
		// 		// onOk() {
		// 		// 	delConfig(configId).then((response) => {
		// 		// 		if (response.code === 200) {
		// 		// 			that.$message.success('删除成功!');
		// 		// 			that.getList();
		// 		// 		} else {
		// 		// 			that.$message.error(response.msg);
		// 		// 		}
		// 		// 	});
		// 		// },
		// 	});
		// },
		// 批量删除
		batchDelete(ids) {
			console.log('shanchu');
			const that = this;
			this.$confirm({
				title: '系统提示',
				content: `是否确认删除编号用户为  ${ids.length} 位用户吗?`,
				okText: '删除',
				okType: 'danger',
				cancelText: '取消',
				onOk() {},
			});
		},
		onContextMenuClick(treeKey, menuKey) {
			console.log(`treeKey: ${treeKey}, menuKey: ${menuKey}`);
		},
		/** 清空按钮操作 */
		handleClean() {
			const that = this;
			this.$confirm({
				title: '警告',
				content: `是否确认清空所有操作日志数据项?`,
				okText: '删除',
				okType: 'danger',
				cancelText: '取消',
				// onOk() {
				// 	cleanOperlog().then((response) => {
				// 		if (response.code === 200) {
				// 			that.$message.success('清空成功!');
				// 			that.getList();
				// 		} else {
				// 			that.$message.error(response.msg);
				// 		}
				// 	});
				// },
			});
		},
		/** 导出按钮操作 */
		handleExport() {
			console.log('daochu ');
			// 	this.download(
			// 		'system/operlog/export',
			// 		{
			// 			...this.queryParams,
			// 		}
			// 		`operlog_${new Date().getTime()}.xlsx`
			// 	);
		},
		// 搜索框中的日期选择
		rangePicker(date, dateString) {
			this.dateRange = dateString;
		},
		/* 任务状态修改 */
		confirmHandleStatus() {
			console.log(23343);
			// 		row.status = row.status === '0' ? '1' : '0';
			// 		const text = row.status === '0' ? '启用' : '停用';
			// 		changeUserStatus(row.userId, row.status);
			// 			.then(() => {
			// 				this.$message.success(text + '成功', 3);
			// 			})
			// 			.catch(function () {
			// 				this.$message.error(text + '发生异常', 3);
			// 			});
		},
		cancelHandleStatus() {
			console.log('sudishfcd');
		},
	},
};
</script>
<style scoped lang="scss">
.container-div {
	width: 100%;
}
.app-container {
	padding: 20px;
}
</style>
